<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 商品css3样式-->
<!--<style>-->

<!--    * {-->
<!--        margin: 0;-->
<!--        padding: 0;-->
<!--    }-->

<!--    ul, ol {-->
<!--        list-style: none;-->
<!--    }-->

<!--    input, button {-->
<!--        outline: none;-->
<!--        border: none;-->
<!--    }-->

<!--    a {-->
<!--        text-decoration: none;-->
<!--    }-->

<!--    .clearfix::before,-->
<!--    .clearfix::after {-->
<!--        content: "";-->
<!--        height: 0;-->
<!--        line-height: 0;-->
<!--        display: block;-->
<!--        visibility: hidden;-->
<!--    }-->

<!--    .clearfix::after {-->
<!--        clear: both;-->
<!--    }-->

<!--    body {-->
<!--        padding: 100px;-->
<!--        background-color: #f5f5f5;-->
<!--    }-->

<!--    .product li {-->
<!--        float: left;-->
<!--        width: 234px;-->
<!--        height: 246px;-->
<!--        padding: 34px 0 20px;-->
<!--        z-index: 1;-->
<!--        margin-left: 14px;-->
<!--        margin-bottom: 14px;-->
<!--        background: #fff;-->
<!--        -webkit-transition: all .2s linear;-->
<!--        transition: all .2s linear;-->
<!--        position: relative;-->
<!--    }-->

<!--    .pro-img {-->
<!--        width: 150px;-->
<!--        height: 150px;-->
<!--        margin: 0 auto 18px;-->
<!--    }-->

<!--    .pro-img a {-->
<!--        width: 100%;-->
<!--        height: 100%;-->
<!--    }-->

<!--    .pro-img img {-->
<!--        display: block;-->
<!--        width: 100%;-->
<!--        height: 100%;-->
<!--    }-->

<!--    .product li h3 {-->
<!--        margin: 0 10px;-->
<!--        font-size: 14px;-->
<!--        font-weight: 400;-->
<!--        text-align: center;-->
<!--    }-->

<!--    .product li h3 a {-->
<!--        color: #333;-->
<!--    }-->

<!--    .desc {-->
<!--        margin: 0 10px 10px;-->
<!--        height: 18px;-->
<!--        font-size: 12px;-->
<!--        text-align: center;-->
<!--        text-overflow: ellipsis;-->
<!--        white-space: nowrap;-->
<!--        overflow: hidden;-->
<!--        color: #b0b0b0;-->
<!--    }-->

<!--    .price {-->
<!--        font-size: 14px;-->
<!--        margin: 0 10px 10px;-->
<!--        text-align: center;-->
<!--        color: #ff6700;-->
<!--    }-->

<!--    .price del {-->
<!--        color: #b0b0b0;-->
<!--    }-->

<!--    .review {-->
<!--        position: absolute;-->
<!--        bottom: 0;-->
<!--        left: 0;-->
<!--        z-index: 3;-->
<!--        width: 234px;-->
<!--        height: 0;-->
<!--        overflow: hidden;-->
<!--        font-size: 12px;-->
<!--        background: #ff6700;-->
<!--        opacity: 0;-->
<!--        -webkit-transition: all .2s linear;-->
<!--        transition: all .2s linear;-->
<!--    }-->

<!--    .review a {-->
<!--        color: #757575;-->
<!--        display: block;-->
<!--        padding: 8px 30px;-->
<!--        outline: 0;-->
<!--    }-->

<!--    .review a span {-->
<!--        display: block;-->
<!--        margin-bottom: 5px;-->
<!--        color: #fff;-->
<!--    }-->

<!--    .product li:hover {-->
<!--        -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);-->
<!--        box-shadow: 0 15px 30px rgba(0,0,0,0.1);-->
<!--        -webkit-transform: translate3d(0, -2px, 0);-->
<!--        transform: translate3d(0, -2px, 0);-->
<!--    }-->

<!--    .product li:hover .review {-->
<!--        opacity: 1;-->
<!--        height: 76px;-->
<!--    }-->




<!--</style>-->

<breadcrumbs class="breadcrumbs"></breadcrumbs>
<div class="container">
    <div class="filter_box">
        <div class="filter_list_wrap clearfix">
<!--            <goods-filter filter-types="filterTypes" filter-contents="filterContents"></goods-filter>-->
            <div>

                <div>
                <dt style="color: #b0b0b0;width: 60px;height: 30px;float: left;text-align: center">品牌:</dt>
                    <a href="#" style="width: 60px;height: 30px;float: left;color: orange;text-align: center">全部</a>
                    <a href="#" style="width: 60px;height: 30px;float: left;text-align: center">vivo</a>
                    <a href="#" style="width: 60px;height: 30px;float: left;text-align: center">apple</a>
                    <a href="#" style="width: 60px;height: 30px;float: left;text-align: center">小米</a>
                </div>

                <br/>
                <br/>
                <div>
                    <dt style="color: #b0b0b0;width: 60px;height: 30px;float: left;text-align: center">分类:</dt>
                    <a href="#" style="width: 60px;height: 30px;float: left;color: orange;text-align: center">全部</a>
                    <a href="#" style="width: 60px;height: 30px;float: left;text-align: center">手机</a>
                    <a href="#" style="width: 60px;height: 30px;float: left;text-align: center">平板</a>
                </div>

            </div>

        </div>
    </div>
</div>
<div class="search_content">
    <div class="container">
        <div class="search_title clearfix">
            <ul class="search_title_left fl">
                <li><a href="">推荐</a></li>
                <li><a href="">新品</a></li>
                <li><a href="">价格</a></li>
                <li><a href="">评论最多</a></li>
            </ul>
            <ul class="search_title_right fr">
                <li><a href="">查看评价</a></li>
                <li><a href="">仅显示特惠商品</a></li>
                <li><a href="">仅显示有货商品</a></li>
            </ul>
        </div>
        <div class="search_goods_list">
            <div class="search_goods_item" ng-repeat="product in searchResultList">
                <div class="actions clearfix">
                    <a class="btn_like icon"><span>喜欢</span></a>
                    <a class="btn_buy btn-buy-detail icon" ui-sref="buyNow({productId:product.productId})"><span>立即购买</span></a>
                </div>
                <img ng-src="/static/img/nav/{{product.img}}.jpg" alt="">
                <a ui-sref="#">{{product.name}}</a>
                <p class="price">{{product.price}}</p>
                <div class="small_img">
                    <img ng-src="/static/img/nav/{{product.img}}.jpg" alt="">
                    <img ng-src="/static/img/nav/{{product.img}}.jpg" alt="">
                    <img ng-src="/static/img/nav/{{product.img}}.jpg" alt="">
                    <img ng-src="/static/img/nav/{{product.img}}.jpg" alt="">
                </div>
            </div>


<!--            <div class="product" th:each="product:${products}">-->
<!--                <ul>-->
<!--                    <li>-->
<!--                        <div class="pro-img">-->
<!--                            <a href="#">-->
<!--                                <img src="/static/img/nav/2.jpg" alt="">-->
<!--                            </a>-->
<!--                        </div>-->
<!--                        <h3><a href="#">小米电视4A 43英寸青春版</a></h3>-->
<!--                        <p class="desc">全高清屏 / 人工智能语音</p>-->
<!--                        <p class="price">-->
<!--                            <span>1499</span>元-->
<!--                            <del>1699</del>-->
<!--                        </p>-->
<!--                        <div class="review">-->
<!--                            <a href="#">-->
<!--                                <span class="msg">一如既往的好，小米情怀</span>-->
<!--                                <span class="auther"> 来自于 惊喜 的评价 </span>-->
<!--                            </a>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                </ul>-->
<!--                -->
<!--            </div>-->


        </div>
    </div>
</div>

</html>